<template>
  <div>
    <div class="banner" @click="globalShow" >
      <img :src="'http://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/'+skinId+'/'+skinId+'-bigskin-1.jpg'">
      <div class="bannerCompress">
        <span class="iconfont" >&#xe692;</span>
        {{this.skin.length}}
      </div>
      <div class="bannerInfo">{{cname}}--{{title}}</div>
    </div>
    <fade-animation>
      <comment-global
        :imgs="skin"
        v-show="showGlobal"
        @close="globalClose"
        :skinId="skinId"
      >
      </comment-global>
    </fade-animation>
    <div class="con-nav">
      <div class="con-nav-left" @click="videoShow">
        <img src="http://game.gtimg.cn/images/yxzj/m/m201706/images/herodetail/icon_06.png">
        <span>英雄介绍视频</span>
      </div>
      <div class="con-nav-right">
        <img src="http://game.gtimg.cn/images/yxzj/m/m201706/images/herodetail/icon_07.png">
        <span>英雄进阶</span>
      </div>
    </div>
    <div class="herovideo" v-if="flag">
      <fade-animation>
        <video
          :src="url"
          controls="controls"
          preload="none"
        >
       </video>
      </fade-animation>
    </div>
    <div class="img-show">
      <img :src="'http://game.gtimg.cn/images/yxzj/m/m201706/images/heropicdetail/'+skinId+'.jpg'">
    </div>
  </div>
</template>
<script>
  import CommentGlobal from '../../../../comment/global/Global'
  import FadeAnimation from '../../../../comment/fade/FadeAnimation'
  export default {
    name: 'HeroBanner',
    components: {
      CommentGlobal,
      FadeAnimation
    },
    data () {
      return {
        showGlobal: false,
        flag: false,
        heroResult: [],
        skin: [],
        skinId: '',
        cname: '',
        title: '',
        url: ''
      }
    },
    created () {
      this.getHeroInfo()
    },
    methods: {
      globalShow () {
        this.showGlobal = true
      },
      globalClose () {
        this.showGlobal = false
      },
      videoShow () {
        this.flag = !this.flag
      },
      getHeroInfo () {
        this.$http('../../../static/json/herolist.json').then(this.getHeroInfoSucc)
      },
      getHeroInfoSucc (res) {
        const data = res.data
        for (var i=0;i <data.length;i++) {
          if(data[i].ename == this.$route.params.id){
              const result = data[i]
              this.heroResult.push(result)
              this.skinId = result.ename
              this.cname = result.cname
              this.title = result.title
              this.url = result.video_url
              console.log(this.url)
              this.skin = result.skin_name.split('|')
          }
        }
      }
    }

  }
</script>
<style scoped>
  .banner {
    width:100%;
    height: 55%;
    overflow: hidden;
    position: relative;
  }
  .banner img {
    width: 100%;
    height: 100%;
  }

  .banner .bannerCompress {
    line-height:20px;
    background-color:rgba(0,0,0,.6);
    position: absolute;
    left: 10px;
    bottom: 26px;
    border-radius: 10px;
    color: white;
    padding: 0 10px;
  }
  .bannerCompress span {
    padding: 0 10px;
  }
  .banner .bannerInfo{
    line-height: 24px;
    width: 100%;
    background-image: linear-gradient(top, rgba(178,34,34,0),rgba(178,34,34,.8));
    position: absolute;
    padding-left: 10px;
    bottom:0;
    color: white;
  }
  .con-nav {
    width:100%;
    height:45px;
    margin-bottom: 5px;
  }
  .con-nav img {
    width: 20px;
    height:20px;
    padding: 12px 5px;
  }
  .con-nav span {
    display:block;
    margin-top: -32px;
    margin-left: 32px;
  }
  .con-nav .con-nav-left{
    width:40%;
    height:39px;
    border:1px solid #dd6161;
    border-radius: 2px;
    margin-top:3px;
    display:inline-block;
    margin-left:6.5%;
  }
  .con-nav-right{
    width:40%;
    height:39px;
    border-radius: 2px;
    border:1px solid #dd6161;
    margin-top:3px;
    margin-left:6.5%;
    display:inline-block;
  }
  .img-show img {
    max-width: 100%;
  }
  .herovideo video {
    width: 100%;
    height:100%;
  }
</style>
